<template>
  <div class="my-income-layout">
    <snackbar style-color="#4A4A4A" back-color="#ffffff" status-color="#ffffff" :fixed="true">
      <template slot="slot">
      </template>
    </snackbar>
    <div class="mycar2">
      <div class="kuang">
        <div class="bd4">
          <span class="word4">车牌</span>
          <span class="word5">桂B&nbsp;&nbsp;68686</span>
        </div>
        <!-- 汽车介绍 -->
        <div class="con-btm">
          <div class="section4">
            <span class="word6">汽车购买时间</span>
            <span class="txt1">2021-5-31</span>
            <img class="pic1" mode="aspectFit" src="../../assets/image/calendar(1).png" />
          </div>
          <div class="section5">
            <span class="info1">汽车品牌&nbsp;</span>
            <span class="word7">东风</span>
          </div>
          <div class="section6">
            <span class="info2">汽车型号&nbsp;</span>
            <span class="word8">C200</span>
            <span class="info3">&nbsp;</span>
          </div>
          <div class="section7">
            <span class="info4">购买价格&nbsp;</span>
            <span class="word9">¥150000</span>
            <span class="word10">&nbsp;</span>
          </div>
          <div class="section8">
            <span class="info5">贷款金额&nbsp;</span>
            <span class="info6">¥150000</span>
            <span class="word11">&nbsp;</span>
            <span class="info7">月供&nbsp;</span>
            <span class="word12">¥3600</span>
            <span class="word13">&nbsp;</span>
          </div>
        </div>
        <!-- 图片上传区 -->
        <div class="section9">
          <div class="outer1"><img class="picStyle" src="../../assets/image/addCarPic.png"></div>
          <span class="word14">上传行驶证照片</span>
        </div>
      </div>
    </div>
    <!-- 底部导航操作 -->
    <div class="bottom-layout">
      <span class="rests-btn">我的车辆</span>
      <span class="add-btn">提交</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'income',
    data() {
      return {
        active: null
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-income-layout {
    width: 100%;
    height: 100vh;
    background-color: #FFFFFF;

    .top-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid rgba(219, 219, 219, 0.5);
      width: 100vw;
      background-color: white;

      .tebs-layout {
        width: 100vw;
      }
    }

    .bottom-layout {
      position: fixed;
      bottom: 0px;
      width: 100vw;
      height: 47px;
      display: flex;
      flex-direction: row;


      .rests-btn {
        width: 121px;
        height: 47px;
        background: #FFFFFF;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(221, 220, 220, 0.5);
        font-size: 14px;
        color: #3A3A3A;
      }

      .add-btn {
        flex: 1;
        height: 47px;
        background: linear-gradient(221deg, #7ED785 0%, #64C367 100%);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        font-size: 14px;
        color: #FFFFFF;
      }
    }

  }

  .kuang {
    height: 100vh;
    width: 80vw;
    margin: 3% auto 0 auto;
  }

  .bd4 {
    height: 6vh;
    line-height: 6vh;
    width: 100%;
    border-radius: 5px;
    border: 1px solid rgba(151, 151, 151, 1);
    margin: 0 auto;
  }

  .word4 {
    font-size: 1em;
    color: #9B9B9B;
    margin: 0 4% 0 4%;
  }

  .word5 {
    font-size: 1em;
    margin: 0 0 0 0;
    color: #4A4A4A;
  }

  //中下汽车类型介绍样式
  .con-btm {
    height: 30vh;
    margin-top: 9%;
    margin-left: 1%;
  }

  .section4 {
    width: 100%;
    height: 5vh;
    line-height: 5vh;
    display: flex;
    align-items: center;
    position: relative;
  }

  .word6 {
    font-size: 1em;
    color: #9B9B9B;
    padding-right: 6%;
  }

  .txt1 {
    font-size: 1em;
    padding-right: 10%;
  }

  .pic1 {
    width: 5.5vw;
    height: 3.5vh;
    position: absolute;
    right: 4%;
  }

  .section5 {
    width: 100%;
    height: 5vh;
    line-height: 5vh;
    margin: 0 auto;
  }

  .info1 {
    font-size: 1em;
    color: #9B9B9B;
    padding-right: 2%;
  }

  .word7 {
    font-size: 1em;
  }

  .section6 {
    height: 5vh;
    line-height: 5vh;
    margin: 0 auto;
  }

  .info2 {
    font-size: 1em;
    color: #9B9B9B;
    padding-right: 2%;
  }

  .word8 {
    font-size: 1em;
    padding-left: 5%;
  }

  .section7 {
    height: 5vh;
    line-height: 5vh;
    margin: 0 auto;
  }

  .info4 {
    font-size: 1em;
    color: #9B9B9B;
    padding-right: 2%;
  }

  .word9 {
    font-size: 1em;
    padding-left: 5%;
  }

  .section8 {
    height: 5vh;
    line-height: 5vh;
    margin: 0 auto;
  }

  .info5 {
    font-size: 1em;
    color: #9B9B9B;
    padding-right: 4%;
  }

  .info6 {
    font-size: 1em;
    padding-right: 5%;
  }

  .info7 {
    font-size: 1em;
    color: #9B9B9B;
  }

  .word12 {
    font-size: 1em;
    padding-left: 4%;
  }

  .section9 {
    width: 100%;
    height: 22vh;
    margin: 0 auto;
    border: 1px solid #9B9B9B;
    border-radius: 5px;
    position: relative;
  }

  .outer1{
    width: 10vw;
    height: 5vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-70%);
  }

  .outer1 img{
    width: 100%;
    height: 100%;
  }

  .word14 {
    font-size: 1em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24%;
    color: #9B9B9B;
  }
</style>
